<template>
    <div class="middleOut">
      <shortcuts></shortcuts>
     <!-- 轮播 -->
    <div class="slideshow">
      <div class="block">
    <el-carousel :interval="4000"    type="card" height="200px">
    <el-carousel-item v-for="(item,i) in bannerData" :key="i">
    <h3 class="medium"><img :src="item.imageUrl" :alt="item.typeTitle"></h3>
    </el-carousel-item>
    </el-carousel>
      </div>
       </div>
  
      <Singles
      :Singles=Singles
      :value="true"
      ></Singles>
     <!-- 最新音乐 -->
      <div class="NewMusic">
           <div class="text">最新音乐 <i class="el-icon-arrow-right"></i></div>
           <div class="NewMusicOut">
          <div class="NewMusic-bottom" v-for="(item,i) in NewMusic" :key="i">
<<<<<<< HEAD
          <img :src="item.picUrl" alt="" @click="passId(item)">
=======
          <img :src="item.picUrl" alt="" @click="passId(item.id)">
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
          <div class="NewMusic-bottom-item">
             <div>{{item.name}}</div>
             <div>{{item.song.artists[0].name}}</div>
             </div>
          </div>
        </div>
    </div> 
    <!-- 独家放送 -->
  <div class="recommendMv">
     <div class="newMvText">独家放送 <i class="el-icon-arrow-right"></i></div>
        <div class="newMvOut">
         <div class="newMvMian" v-for="(item,i) in MvList" :key="i">
             <img :src="item.picUrl" alt="">
              <p class="p1">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
      return {
       bannerData:[],
       Singles:[],
       NewMusic:[],
       MvList:[]
       
      }
    },
    methods:{
      async getBannerData() { //轮播区域
      let result = await this.$request("/banner");
      this.bannerData = result.data.banners;
     
    },
    async  recommendedPlaylist(){ //推荐歌单
       const {data:res}=await this.$request("/personalized",{
         limit:10
       })
       this.Singles=res.result
  
    },
    async getNewMusic(){ //获取最新音乐
        const {data:res}=await this.$request("/personalized/newsong",{
          limit:12
        })
        this.NewMusic=res.result
    },
    //传入id 获取歌曲地址
<<<<<<< HEAD
     async passId(item){  
      console.log(item)
       const {data:res} =await this.$request("/song/url",{
         id:item.id
       })
       if(res.code!=200) return 
       var data={
           url:res.data[0].url,
           time:item.dt,
           id:res.data[0].id,
           img:item.picUrl,
           name:item.name,
           nickName:item.ar[0].name
       }
       console.log(data)
      // this.$Store.commit("passUrl",data)
      // this.$Store.commit("Muisclist",this.Songlist)
=======
    async passId(id){
      
       const {data:res} =await this.$request("/song/url",{
         id:id
       })
       if(res.code!=200) return 
    
      this.$Store.commit("passUrl",res.data[0].url)
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
    },
    //获取Mv
    async getMv(){
      const {data:res} =await this.$request("/personalized/privatecontent")
      this.MvList=res.result
   
    },
    
   },
    created(){
       this.getBannerData()
       this.recommendedPlaylist()
       this.getNewMusic()
       this.getMv()
    }
}
</script>

<style lang="less"  scoped> 

.middleOut{
  width: 1300px;
<<<<<<< HEAD
  height:1600px;
=======
  height:1400px;
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
  display: flex;
  flex-direction:column;
  padding:20px 40px;
}
  
.slideshow{
  width:100%;
  height:200px;
  
    .block{
  margin: 0 auto;
  width:1000px;
  }
  img{
    width:100%;
    height:100%;
   
  }
}


.el-carousel__item{
  border-radius: 10px;
}
   .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
     opacity: 0.75;
    line-height: 150px;
    margin: 0;
    
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

  .outPlaylist{
  margin-top:40px;
.text{
  font-size:20px;
  font-weight:600;  
  color:black;
  padding-bottom:20px;
  i{
    margin-left:8px;
    font-size:20px;
  }
}
  .recommended{
  width: 100%;
  height:500px;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  
   .playlist{
     width:18%;
     height:200px;
     
     img{
       width:100%;
       height:100%;
       border-radius:10px;
     }
   }
  }
  }

.NewMusic{
  margin-top:20px;
   .text{
  font-size:20px;
  font-weight:600;  
  color:black;
  padding-bottom:20px;
  i{
    margin-left:8px;
    font-size:20px;
  }
}
.NewMusicOut{
 
    display: flex;
    flex-wrap:wrap;
}
.NewMusic-bottom{
  width:33%;
  height:60px;
  display: flex;
   margin-top:10px;
  
  &:hover{
    background-color: #aaa;
  }
   img{
     width:60px;
     height:60px;
     border-radius: 8px;
   }
   .NewMusic-bottom-item{
     display:flex;
     flex-direction:column;
     justify-content: space-between;
     font-size:12px;
     padding:4px 8px;
   }
}
}
.recommendMv{
  width:100%;
  height:200px;
  margin-top:30px;
.newMvText{
   font-size:20px;
  font-weight:600;  
  color:black;
  padding-bottom:20px;
  i{
    margin-left:8px;
    font-size:20px;
   }
 }
 .newMvOut{
  display:flex;
  justify-content: space-between;
  .newMvMian{
    width:31%;
  height:200px;
   img{
     width:100%;
     height:170px;
     border-radius:10px;
   }
  .p1{
    font-size:14px;
    color:black;
    padding:6px 0;
  }

  }

 }
}
</style>